<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<HEAD>
	<TITLE> ZTREE DEMO - big data common</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" th:href="@{/common/zTree_v3/css/demo.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/common/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shCore.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shThemeDefault.css}" type="text/css">

	<script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery-1.4.4.min.js}"></script>
	<script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.exedit.js}"></script>
	<script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/XRegExp.js}"></script>
	<script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shCore.js}"></script>
	<script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJava.js}"></script>
	<script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJScript.js}"></script>
	<script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushSql.js}"></script>
	<script type="text/javascript" th:src="@{/common/showdown/showdown.min.js}"></script>
	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			callback:{
				onMouseUp: onMouseUp
			}
		};
		function onMouseUp(event, treeId, treeNode) {
			if (treeNode){
				if (treeNode.uuid!=undefined){
					change(treeNode.name,treeNode.uuid,treeNode.dir);
				}
			}
		}

		var dataMaker = function(count) {
			$.ajax({
				url:'http://192.168.56.1:8888/ws/compose',
				type:'post',
				dataType: 'JSON',
				contentType: 'application/json',
				success:function (data) {
					var obj=JSON.parse(data);
					// alert(obj.data.name);
					var zNodes =[];
					setNode(zNodes,obj.data);
					$("#treeDemo").empty();
					$.fn.zTree.init($("#treeDemo"), setting, zNodes);//创建树形列表
				}
			});
		}

		function  setNode(znode,obj) {
			var node=new Object();
			node.name=obj.name;
			node.uuid=obj.uuid;
			node.dir=obj.dir;
			node.children=[];
			$.each(obj.childs,function (i,val) {
				setNode(node.children,val);
			})
			znode.push(node);
		}

		function change(name,uuid,dir) {

			$.ajax({
				url:"http://192.168.56.1:8888/ecco/detail",
				type:"get",
				data: {name:name,uuid:uuid,dir:dir},
				success:function (data) {
					document.getElementById("detail").innerHTML = data;
					var line=$("#javaline").text();
					$("#javadetail").attr("class","brush: java;highlight:"+line);
					SyntaxHighlighter.highlight();//设置代码高亮
				}
			})
			// document.getElementById("detail").innerHTML = '<object type="text/html" data="detail.html" width="100%" height="600px"></object>';
		}

		function showrelease(){
			$.ajax({
				url:"http://192.168.56.1:8888/ecco/readme",
				type:"get",
				data: {},
				success:function (data) {
					document.getElementById("detail").innerHTML = data;
					showreleasestep2();

				}
			})
		}
		function showreleasestep2() {
			var text =document.getElementById("content").innerText;
			var converter = new showdown.Converter();
			var html = converter.makeHtml(text);
			document.getElementById("result").innerHTML = html;
		}

		$(document).ready(function(){
			$("#createTree").bind("click", dataMaker);
			$("#change").bind("click",change);

		});
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<div>
	<div style="position: absolute;width: 250px">
		<div>
			[ <a id="createTree" href="#" title="初始化结果" onclick="return false;">初始化结果</a> ]
<!--			<a id="change" title="初始化结果" onclick="return false;">change</a>-->
		</div>
		<div>
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div id="detail" style="position: absolute;left: 250px;margin-left: 10px;">
	</div>
</div>

<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
	<table width=""100% style="position: absolute; width:260px; right: 0px; top: 0px;">
		<input type="button" value="release note" onclick="showrelease()">
	</table>
</div>
</BODY>
<script type="text/javascript">
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.all();
</script>
</HTML>